<template>
  <div class="movie">
    <div class="nav">
        <ul>
          <li :class="{cur:$route.path=='/BookAndMovie/movie'}" @click="$router.push('/BookAndMovie')">电影</li>
          <li :class="{cur:$route.path=='/BookAndMovie/book'}" @click="$router.push('/BookAndMovie/book')">读书</li>
          <li :class="{cur:$route.path=='/BookAndMovie/tv'}" @click="$router.push('/BookAndMovie/tv')">电视</li>
          <li :class="{cur:$route.path=='/BookAndMovie/samecity'}" @click="$router.push('/BookAndMovie/samecity')">同城</li>
          <li :class="{cur:$route.path=='/BookAndMovie/music'}" @click="$router.push('/BookAndMovie/music')">音乐</li>
        </ul>
    </div> 
    <div>
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="less" scoped>
.movie{
  width: 100vw;
  .nav{
    width: 100%;
    ul{
      display: flex;
      border-bottom: 1px solid #ccc;
      li{
        height: 30px;
        flex: 1;
        line-height: 30px;
        text-align: center;
        color: rgb(121, 119, 119);
        &.cur{
          background: #07d614;
          color: #fff;
        }
      }
    }
  }
}
</style>